<template>
  <div class="users">
    <el-descriptions :column="3"  border  v-for='(item,index) in usersInfo' :key="index" align="center" >
            <el-descriptions-item align="center">
        <template slot="label" >
          <i class="iconfont icon-a-touxiang1"></i>
          头像
        </template>
         <el-avatar  :src="item.headimgurl"></el-avatar>
      </el-descriptions-item>
     
      <el-descriptions-item align="center">
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{item.username}}
      </el-descriptions-item>
       <el-descriptions-item align="center">
        <template slot="label">
          <i class="iconfont icon-xingbie---"></i>
          性别
        </template>
        {{item.sex=2?'女':'男'}}
      </el-descriptions-item>
      <el-descriptions-item align="center">
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        1{{item.phone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="iconfont icon-juzhudi"></i>
          居住地
        </template>
        {{item.city}}
      </el-descriptions-item>
            <el-descriptions-item>
        <template slot="label">
          <i class="iconfont icon-shengfen"></i>
          省份
        </template>
        {{item.province}}
      </el-descriptions-item>
              <el-descriptions-item>
        <template slot="label">
          <i class="iconfont icon-guojia"></i>
          国家
        </template>
        {{item.country}}
      </el-descriptions-item>
       <el-descriptions-item>
        <template slot="label">
          <i class="iconfont icon-wode1"></i>
          昵称
        </template>
        {{item.nickname}}
      </el-descriptions-item>
       <el-descriptions-item>
        <template slot="label">
          <i class="iconfont icon-huiyuandengji"></i>
          会员等级
        </template>
        {{item.vipLevel}}
      </el-descriptions-item>
    
      <el-descriptions-item prop="item.unid">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          操作
        </template>
        <el-button type="primary" size="small" @click="caoZuo(item.unid)">编辑</el-button>
      </el-descriptions-item>

    </el-descriptions>
    <!-- 展示dialog框 -->
    <qfdialog></qfdialog>

  </div>

</template>

<script>
import qfdialog from "../../../components/dialog/index -userInfo.vue"; //引入dialog弹出框
  import * as api from '../../../api'
  import { mapActions, mapState, mapMutations } from "vuex"; //引入vuex文件
  export default {
    computed: {
      ...mapState(['dialogVisible', 'dialogTitle'])
    },
    components: {
      qfdialog
    },
    data () {
      return {
        usersInfo:[] //用户信息
      }
    },
    mounted() {
      api.getAllUsers()
        .then(res => {
          console.log(res.data.data);
          this.usersInfo = res.data.data
        })
    },
    methods: {
      ...mapMutations(['SHOW_DIALOG','CHANGE_DIALOG_TITLE','HIDE_DIALOG']),
      caoZuo(e){
        // 点击操作按钮，弹出编辑框，对其经行编辑
        // console.log(12);
              // 编辑的时候让dialog弹出来，并且dialog的标题为 编辑学员信息
      this.CHANGE_DIALOG_TITLE("编辑用户信息");
      this.SHOW_DIALOG();
        api.ModifyUserInfo(e)
        .then(res=>{
          
          console.log(res);
        })
      }
    }
  };
</script>

<style scoped>
  .users {
    margin-top: 20px;
  }
</style>